<template>
  <div class="collection">
    <div class="plus"></div>
    <DefLayout nTitle="我的收藏">
      <template>
        <div class="box" v-if="allLikeData.length != 0">
          <ul>
            <li v-for="(item, index) in allLikeData" :key="index">
              <Product :data="item">
                <van-icon
                  class="del"
                  name="delete-o"
                  size="14px"
                  color="#666"
                  @click="delCollection(item.pid, index)"
                />
              </Product>
            </li>
          </ul>
        </div>
        <van-empty description="没有收藏数据了" class="empty" v-else />
      </template>
    </DefLayout>
  </div>
</template>

<script>
import DefLayout from "@/components/DefLayout";
import Product from "@/components/Product";

export default {
  name: "Collection",

  data() {
    return {
      allLikeData: [],
    };
  },

  components: {
    DefLayout,
    Product,
  },

  created() {
    this.getAllLike();
  },

  methods: {
    // 获取所有收藏的商品
    getAllLike() {
      let tokenString = this.$cookies.get("TOKEN");
      this.axios
        .get("findAllLike", {
          params: {
            tokenString,
          },
        })
        .then((res) => {
          //
          if (res.data.code == 700) {
            this.$toast("请先登录");
            // 清除token
            this.$cookies.remove("TOKEN");
            // 延迟2秒后跳转到登录页面
            let timer = setTimeout(() => {
              clearTimeout(timer);
              this.$router.replace({ name: "Login" });
            }, 2000);
            return;
          }
          if (res.data.code === 2000) {
            this.allLikeData = res.data.result;
          }
        })
        .catch((err) => {});
    },

    // 删除收藏
    delCollection(pid, index) {
      let tokenString = this.$cookies.get("TOKEN");
      this.$dialog
        .confirm({
          title: "提示",
          message: "是否确认删除收藏？",
        })
        .then(() => {
          this.axios
            .post("notlike", {
              tokenString,
              pid
            })
            .then((res) => {
              
              
              if (res.data.code == 700) {
                this.$toast("请先登录");
                // 延迟2秒后跳转到登录页面
                let timer = setTimeout(() => {
                  clearTimeout(timer);
                  this.$router.replace({ name: "Login" });
                }, 2000);
                return;
              }
              if (res.data.code === 900) {
                this.$toast(res.data.msg);
                this.allLikeData.splice(index, 1);
              }
            })
            .catch((err) => {
            });
        })
        .catch(() => {});
    },
  },
};
</script>

<style lang="less" scoped>
.empty {
  margin-top: 30px;
  background: #f7f8fa;
}

.collection {
  .box {
    padding: 10px;
    ul {
      display: grid;
      // grid-template-columns: repeat(3, 105px);
      grid-template-columns: repeat(3, calc(33.33333% - 7px));
      gap: 10px;
    }
  }
}
</style>